import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View } from '@tarojs/components';
import { AtSearchBar, AtTabBar, AtList, AtListItem, AtActivityIndicator } from 'taro-ui';
import Actions from '../../utils/actions';
import Api from '../../utils/api';
import Global from '../../utils/global';
import './list.scss';
export default class List extends Taro.Component {
  constructor() {
    super(...arguments);

    this.state = {
      searchText: '',
      tabIndex: 0,
      list: [],
      badges: [0, 0, 0],
      loading: true
    };
  }
  async componentWillMount() {
    const res = await Api.request(Actions.TODO);
    const data = res.data;
    this.setState({
      list: data.list,
      loading: false
    });
  }
  onSearchTextChange(value) {
    this.setState({
      searchText: value
    });
  }
  tabClick(value) {
    this.setState({
      tabIndex: value
    });
  }
  handleListItemClick(wo) {
    Global.set('wo', wo);
    Taro.navigateTo({
      url: '/pages/wo/detail'
    });
  }
  getUndispatchedList() {
    const { list, badges } = this.state;
    let badge = 0;
    const com = <AtList>
    {list.map(item => {
        if (item.action === 'start') {
          badge++;
          return <AtListItem title={item.work_order.code + '-' + item.work_order.cate.title} note={item.work_order.desc}
          //extraText={item.work_order.desc}
          arrow="right" thumb={Global.config.cdnServer + '/images/undispatched.png'} onClick={this.handleListItemClick.bind(this, item.work_order)} />;
        }
      })}
    </AtList>;
    if (badge != badges[0]) {
      let new_badges = badges;
      new_badges[0] = badge;
      this.setState({
        badges: new_badges
      });
    }
    return com;
  }
  getUnfinishedList() {
    const { list } = this.state;
    return <AtList>
    {list.map(item => {
        if (item.action === 'dispatch') {
          return <AtListItem title={'[' + item.work_order.code + ']'} note={item.work_order.cate.title} arrow="right" thumb={Global.config.cdnServer + '/images/unfinished.png'} />;
        }
      })}
    </AtList>;
  }
  getUnconfirmList() {
    const { list } = this.state;
    return <AtList>
    {list.map(item => {
        if (item.action === 'finish') {
          return <AtListItem title={'[' + item.work_order.code + ']'} note={item.work_order.cate.title} arrow="right" thumb={Global.config.cdnServer + '/images/unconfirmed.png'} />;
        }
      })}
    </AtList>;
  }
  render() {
    const { tabIndex, searchText, badges, loading } = this.state;
    let tabList = [{ title: '未受理' }, { title: '处理中' }, { title: '待确认' }];
    for (let i = 0; i < badges.length; i++) {
      if (badges[i] > 0) {
        tabList[i].text = badges[i];
      }
    }
    return <View>
        {loading && <AtActivityIndicator content="正在登录..." mode="center"></AtActivityIndicator>}
        <View style="padding:5px;">
          <AtSearchBar value={searchText} placeholder="工单查询" onChange={this.onSearchTextChange.bind(this)} />
          <AtTabBar tabList={tabList} onClick={this.tabClick.bind(this)} current={tabIndex} />
          {tabIndex == 0 && this.getUndispatchedList()}
          {tabIndex == 1 && this.getUnfinishedList()}
          {tabIndex == 2 && this.getUnconfirmList()}
        </View>
      </View>;
  }
  config = {
    navigationBarTitleText: '工单跟踪'
  };
}